<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="我的关注"></NavBarVue>
		<view class="bg-white flex-1 overflow-hidden py-20">
			<scroll-view scroll-y class="h-full">
				<view v-if="attentionList.length">
					<uni-swipe-action ref="attentionRef">
						<uni-swipe-action-item :threshold="0" :right-options="getOptions(e)" @click="bindClick"
							v-for="e,i in attentionList" :key="i" class="mb-20">
							<view class="flex items-center px-30">
								<view class="w-100 h-100 rounded-lg overflow-hidden">
									<ImageBoxVue :src="e.bepop.headimg"></ImageBoxVue>
								</view>
								<view class="pl-20">
									<view class="flex items-center">
										<text class="text-sm font-bold">{{e.bepop.nickname}}</text>
										<view class="bg-gradient-to-r p-4 from-[#FFD7AA] to-[#FFF2E4] ml-10"
											v-if="e.bepop.memberlevel">
											<text class="font-bold">VIP{{e.bepop.memberlevel.lev}}</text>
										</view>
									</view>
									<text class="text-[#666666]">{{e.bepop.phone}}</text>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
				<NoDataVue v-else></NoDataVue>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi'
	const attentionRef = ref(null)
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const attentionList = ref([])
	const memberQueryFollowlist = () => {
		userApi.memberQueryFollowlist({
			"pop.id": uni.getStorageSync('user').id
		}).then(res => {
			attentionList.value = res.data
		})
	}
	const bindClick = (data) => {
		const {
			key,
			id,
			val
		} = data.content
		if (key == 'shield') {
			// 屏蔽
			userApi.memberSetshield({
				id: id,
				shield: val === 0 ? 1 : 0
			}).then(() => {
				attentionRef.value?.closeAll()
				memberQueryFollowlist()
			})
		}
		if (key == 'tup') {
			// 置顶
			userApi.memberSettup({
				id: id,
				tup: val === 0 ? 1 : 0
			}).then(() => {
				attentionRef.value?.closeAll()
				memberQueryFollowlist()
			})
		}
		if (key == 'follow') {
			// 取消关注
			userApi.memberCancelFans({
				id: id
			}).then(() => {
				attentionRef.value?.closeAll()
				memberQueryFollowlist()
			})
		}
	}
	const getOptions = (val) => {
		return [
			{
				text: val.shield === 0 ? '屏蔽' : "取消屏蔽",
				val: val.shield,
				id: val.id,
				key: "shield",
				style: {
					backgroundColor: '#FF616C'
				}
			}, {
				text: val.tup === 0 ? '置顶' : "取消置顶",
				val: val.tup,
				id: val.id,
				key: "tup",
				style: {
					backgroundColor: '#61B3FF'
				}
			},
			{
				text: "取消关注",
				val: val.follow,
				id: val.id,
				key: "follow",
				style: {
					backgroundColor: '#FFAD61'
				}
			}
		]
	}
	onShow(() => {
		memberQueryFollowlist()
	})
</script>

<style>

</style>